<template>
  <div class="user-cards flex flex-wrap">
    <router-link v-for="user in users" :key="user.id" class="user-card" :class="cardClass(user)"
                 :to="`/${$rp.USERS}/${user.id}`">
      <el-avatar :size="40" :src="user.avatar"/>
      <div class="name" :title="user.nickname">{{ user.nickname }}</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'UserCards',
  props: {
    users: { // 用户数组
      type: Array,
      required: true,
    },
  },
  methods: {
    // 卡片计算样式
    cardClass(user) { return user.level === 'owner' ? 'is-owner' : 'is-admin'; },
  },
};
</script>

<style lang="scss">
.user-cards {
  padding-top: .375rem;
  margin-left: -.25rem;

  .user-card {
    margin-bottom: .375rem;
    margin-left: .25rem;
    width: 5rem;
    max-height: 5.5rem;
    padding: .375rem;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: .3s;
    &:hover { box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); }

    .name {
      max-height: 3em;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &.is-owner {
      border: 1px solid #d9ecff;
      .name { color: #e6a23c; }
    }
  }
}
</style>
